// out: ./xixi.css
// 不生成css文件，只生成.less文件

* {
  box-sizing: border-box;
}

body {
  display: flex; // 开启flex布局
  align-items: center; // 垂直居中
  justify-content: center; // 居中
  height: 100vh; // 全屏高度
  overflow: hidden;
  margin: 0;
}

.cont {
  display: flex;
  width: 90vw;
}

.panel {
  position: relative;
  background-size: cover; // 图片自适应
  background-position: center; // 图片居中
  height: 80vh; // 高度自适应
  border-radius: 50px; // 圆角
  color: #fff;
  cursor: pointer; // 鼠标指针
  flex: .5;
  margin: 10px;
  transition: all 700ms ease-in;

  h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
  }
}

.active {
  flex: 5 !important;

  h3 {
    opacity: 1;
    transform: opacity 700ms ease-in 0.4s; // 动画效果 0.4秒后开始 700ms 速度
  }
}